<template>
	<div class='icons-list-container'>
		<n-tabs v-bind='tabsConfig'>
			<n-tab-pane v-bind='tabPaneConfig' name='customized'>
				<iconGrid iconType='customized' :iconData='icons["customized"]'/>
			</n-tab-pane>
			<n-tab-pane v-bind='tabPaneConfig' name='fa'>
				<iconGrid iconType='fa' :iconData='icons["fa"]'/>
			</n-tab-pane>
			<n-tab-pane v-bind='tabPaneConfig' name='iconfont5'>
				<iconGrid iconType='iconfont5' :iconData='icons["iconfont5"]'/>
			</n-tab-pane>
		</n-tabs>
	</div>
</template>
<script setup lang='ts'>
import { defineAsyncComponent, onMounted, reactive } from 'vue';
import { CustomizedSvgIcons, FaSvgIcons, IconFont5SvgIcons } from '@/config/icon/SvgIcons.ts';
import type {
	IconsClass, IconsProps
} from '#/src/components/page/systemManager/developResources/iconsList/IconsProps.d.ts';
import { TabPaneProps, TabsProps } from 'naive-ui';
const iconGrid = defineAsyncComponent(() => import('./iconGrid.vue'));
const icons = reactive<IconsProps>({
	customized : [],
	fa         : [],
	iconfont5  : []
});
const tabsConfig = reactive<TabsProps>({
	animated         : true,
	type             : 'card',
	paneWrapperStyle : {
		height : '100%', width : '100%', margin : '0', padding : '0'
	},
	paneStyle        : {
		height : '100%', width : '100%', margin : '0', padding : '0'
	}
});
const tabPaneConfig: TabPaneProps = reactive({
	displayDirective : 'show:lazy',
	closable         : false
});
onMounted(() => {
	getSvgIcons('customized');
	getSvgIcons('fa');
	getSvgIcons('iconfont5');
});
/**
 * 获取Svg图标列表数据
 * @param svgLibName 图标库名
 */
const getSvgIcons = async (svgLibName: IconsClass): Promise<void> => {
	let keys;
	switch (svgLibName) {
		case 'customized':
			keys = Object.keys(CustomizedSvgIcons);
			break;
		case 'fa':
			keys = Object.keys(FaSvgIcons);
			break;
		case 'iconfont5':
			keys = Object.keys(IconFont5SvgIcons);
			break;
	}
	keys?.forEach(item => {
		const splitPre = item.replace(`/src/components/customComponents/icon/svg/${svgLibName}/`, '');
		const name = splitPre.replace('.vue', '');
		icons[svgLibName].push({ name : name, value : name });
	});
};
</script>
<style scoped lang='scss'>
.icons-list-container{
	box-sizing :border-box;
	margin     :0;
	padding    :0;
	border     :0;
	height     :100%;
	width      :100%;
}
:deep(.n-tabs--card-type){
	box-sizing :border-box;
	margin     :0;
	padding    :0;
	border     :0;
	height     :100%;
	width      :100%;
}
</style>